<template>
  <div class="work-area">
    <div
      class="work_area"
      @mouseenter="workAreaListShow = true"
      @mouseleave="workAreaListShow = false"
    >
      <span>作业区域道路设定</span>
      <div class="work_area_list" v-if="workAreaListShow">
        <!-- <span>清扫队作业道路设定</span> -->
        <span @click="openCleanerTeam">巡查员负责垃圾点位对应关系设置</span>
        <span @click="openPersonnelRoad">指导员负责垃圾点位对应关系设置</span>
      </div>
    </div>
    <!-- 巡查员负责垃圾点位对应关系设置 -->
    <div class="cleaner_team" v-if="cleanerTeamShow">
      <h2>
        <span class="iconfont icon-zuoyedaolu"></span>
        <span>巡查员负责垃圾点位对应关系设置</span>
        <i class="iconfont icon-guanbi" @click="cleanerTeamShow = false"></i>
      </h2>
      <div class="cleaner_team_content" v-if="cleanerTeamContent">
        <div class="top_box">
          <span>社区小区：</span>
          <el-select :value="cleanerTeamValue" placeholder="请选择">
            <el-option
              v-for="item in cleanerTeamOptions"
              :key="item.CLIENT_NO"
              :label="item.CLIENT_NAME"
              :value="item.CLIENT_NO"
            ></el-option>
          </el-select>
          <span class="cleanerTeamNum">
            记录数量：
            <span class="personNum">{{cleanerTeamList.length}}</span>条
          </span>
        </div>
        <div class="table_list">
          <el-table
            :data="cleanerTeamList"
            style="width: 100%"
            height="440"
            @cell-dblclick="cellDblclick"
            @cell-mouse-enter="cellMouseEnter"
          >
            <el-table-column sortable fixed prop="Index" label="序号" align="center"></el-table-column>
            <el-table-column sortable fixed prop="CLIENT_NO" label="巡查员编号" align="center"></el-table-column>
            <el-table-column fixed prop="CLIENT_NAME" label="巡查员名称" align="center"></el-table-column>
          </el-table>
        </div>
      </div>
      <vdr :drag-handle="'.drag-handle'" :w="800" :h="500" :resizable="false" v-if="setTeam">
        <div ref="setTeam" class="set_team">
          <h2 class="drag-handle">
            <span>班组设定</span>
            <i class="iconfont icon-guanbi" @click="setTeam = false"></i>
          </h2>
          <div class="top_box">
            <span>清扫队：</span>
            <el-input v-model="cleanerTeamLabel" disabled></el-input>
            <span>班组名称：</span>
            <el-input v-model="cleanerTeamName" disabled></el-input>
          </div>
          <div class="set_team_content">
            <div class="box1">
              <p>所属镇</p>
              <div class="group">
                <el-checkbox-group v-model="townValue" @change="getVillageList">
                  <el-checkbox
                    v-for="(item,index) in townList"
                    :key="index"
                    :label="item.CLIENT_NAME"
                  ></el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <el-transfer
              :left-default-checked="defaultChecked"
              :titles="['所属村', '分配']"
              v-model="distributionResult"
              :data="villageList"
            ></el-transfer>
          </div>
          <div class="setTeamBtns">
            <el-button type="primary" @click="saveTeam">保 存</el-button>
            <el-button type="danger" @click="setTeam = false">取 消</el-button>
          </div>
        </div>
      </vdr>
    </div>
    <!-- 人员道路设定 -->
    <div class="cleaner_team personnel_road" v-if="personnelRoadShow">
      <h2>
        <span class="iconfont icon-zuoye"></span>
        <span>指导员负责垃圾点位对应关系设置</span>
        <i class="iconfont icon-guanbi" @click="personnelRoadShow = false"></i>
      </h2>
      <div class="top_box">
        <el-form :inline="true">
          <el-form-item label="社区小区：">
            <el-select :value="cleanerTeamValue" placeholder="请选择">
              <el-option
                v-for="item in cleanerTeamOptions"
                :key="item.CLIENT_NO"
                :label="item.CLIENT_NAME"
                :value="item.CLIENT_NO"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="班组">
            <el-select v-model="cleanerGroupValue" placeholder="请选择社区小区" @change="getVillageOptions">
              <el-option
                v-for="item in cleanerGroupOptions"
                :key="item.CLIENT_NO"
                :label="item.CLIENT_NAME"
                :value="item.CLIENT_NO"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="村">
            <el-select v-model="villageValue" placeholder="请选择村">
              <el-option value="全部"></el-option>
              <el-option
                v-for="item in villageOptions"
                :key="item.CLIENT_NAME"
                :label="item.CLIENT_NAME"
                :value="item.CLIENT_NAME"
              ></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item>
            记录数量：
            <span class="personNum">{{cleanerTeamList.length}}</span> 条
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getPersonList">查 询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="personnelRoad_content">
        <el-table
          :data="cleanerTeamList"
          style="width: 100%"
          height="440"
          @row-dblclick="rowDblclick2"
          @cell-mouse-enter="cellMouseEnter"
        >
          <el-table-column sortable fixed prop="序号" label="序号" align="center"></el-table-column>
          <el-table-column fixed prop="姓名" label="姓名" align="center"></el-table-column>
          <el-table-column fixed prop="街道" label="街道" align="center"></el-table-column>
          <el-table-column fixed prop="社区" label="社区" align="center"></el-table-column>
          <el-table-column fixed prop="小区" label="小区" align="center"></el-table-column>
          <el-table-column fixed prop="垃圾桶" label="垃圾桶" align="center"></el-table-column>
          <!-- <el-table-column fixed prop="区域" label="区域" align="center"></el-table-column> -->
          <el-table-column sortable fixed prop="设置时间" label="设置时间" align="center"></el-table-column>
        </el-table>
      </div>
      <vdr :drag-handle="'.drag-handle'" :w="400" :h="560" :resizable="false" v-if="setPersonShow">
        <div class="setPerson">
          <h2 class="drag-handle">
            <span>人员作业道路</span>
            <i class="iconfont icon-guanbi" @click="setPersonShow = false"></i>
          </h2>
          <div class="set_person_content">
            <el-form :model="setPersonForm" label-width="80px">
              <el-form-item label="姓名：">
                <el-input v-model="setPersonForm.name" disabled></el-input>
              </el-form-item>
              <el-form-item label="清扫队：">
                <el-input v-model="setPersonForm.team" disabled></el-input>
              </el-form-item>
              <el-form-item label="班组：">
                <el-input v-model="setPersonForm.group" disabled></el-input>
              </el-form-item>
              <el-form-item label="设置时间：">
                <el-date-picker type="datetime" v-model="setPersonForm.setTime" disabled></el-date-picker>
              </el-form-item>
              <el-form-item label="镇：">
                <el-input v-model="setPersonForm.town" disabled></el-input>
              </el-form-item>
              <el-form-item label="村：">
                <el-input v-model="setPersonForm.village" disabled></el-input>
              </el-form-item>
              <el-form-item label="区域：">
                <el-select v-model="setPersonForm.area" placeholder="请选择区域" @change="getAreaList">
                  <el-option
                    v-for="item in setPersonForm.areaList"
                    :key="item.Name"
                    :label="item.Name"
                    :value="item.Name"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="height: 110px" label="道路：">
                <div class="box">
                  <p v-for="(item,index) in areaList" :key="index">{{item.ROADNAME}}</p>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="success" @click="savePerson">保 存</el-button>
                <el-button type="danger" @click="setPersonShow = false">取 消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </vdr>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      workAreaListShow: false,
      cleanerTeamShow: false,
      cleanerTeamValue: '',
      cleanerTeamOptions: [],
      cleanerGroupValue: '',
      cleanerGroupOptions: [],
      villageValue: '全部',
      villageOptions: [],
      // 班组数据列表
      cleanerTeamList: [],
      areaList: [],
      cleanerTeamName: '',
      cleanerTeamLabel: '',
      townValue: [],
      townList: [],
      villageList: [],
      distributionResult: [],
      cleanerTeamContent: true,
      setTeam: false,
      personnelRoadShow: false,
      setPersonShow: false,
      setPersonForm: {},
      defaultChecked: []
    }
  },
  methods: {
    // 打开巡查员负责垃圾点位对应关系设置
    openCleanerTeam () {
      this.cleanerTeamShow = true
      this.personnelRoadShow = false
      // 获取班组数据列表
      this.getGrouplist()
      // 获取清扫队下拉框列表
      this.getTeamOptions()
    },
    // 班组双击表格某一行
    cellDblclick (row) {
      this.villageList = []
      this.townValue = []
      this.setTeam = true
      // 获取镇列表
      this.getTownList()
      this.cleanerTeamName = row.CLIENT_NAME
      // this.townValue.push(row.CLIENT_NAME)
      // console.log(this.townValue);

    },
    // 打开人员道路
    openPersonnelRoad () {
      this.personnelRoadShow = true
      this.cleanerTeamShow = false
      this.getTeamOptions()
      this.getGroupOptions()
    },
    // 人工作业道路双击表格某一行
    async rowDblclick2 (row) {
      this.setPersonShow = true
      this.setPersonForm = {
        name: row.姓名,
        team: row.清扫队,
        group: row.班组,
        setTime: row.设置时间,
        town: row.镇,
        village: row.村,
        area: row.区域,
        CLIENT_NO: row.CLIENT_NO
      }
      const { data } = await this.$Http.get('/DataListCompany/GetAreaByVillageApi?village=' + row.村)
      this.setPersonForm.areaList = data
      this.getAreaList()
    },
    // 鼠标进入单元格显示其内容
    cellMouseEnter (row, column, cell, event) {
      cell.setAttribute('title', cell.innerText)
    },
    // 获取清扫队下拉框列表
    async getTeamOptions () {
      const { data } = await this.$Http.get(`/DataListCompany/GetCleaneranceApi?ClientNo=${this.$route.query.ClientNo}`)
      this.cleanerTeamOptions = data
      debugger
      this.cleanerTeamValue = `${this.$route.query.ClientNo}` + '01'
      const [{ CLIENT_NAME }] = data.filter(item => item.CLIENT_NO === this.cleanerTeamValue)
      this.cleanerTeamLabel = CLIENT_NAME
      // this.cleanerTeamLabel=`${this.$route.query.ClientNo}`
    },
    // 获取班组下拉框列表
    async getGroupOptions () {
      const { data } = await this.$Http.get(`/DataListCompany/GetCleanerGroupListApi?ClientNo=${this.$route.query.ClientNo}`)
      this.cleanerGroupOptions = data
      // 获取人员信息列表
      this.getPersonList()
    },
    // 获取村下拉框列表
    async getVillageOptions (e) {
      this.cleanerGroupValue = e
      const [{ CLIENT_NAME }] = this.cleanerGroupOptions.filter(item => item.CLIENT_NO === e)
      const { data } = await this.$Http.get('/DataListCompany/GetVillageByTeamNameApi?ParentName=' + CLIENT_NAME)
      this.villageOptions = data
    },
    // 获取人员信息列表
    async getPersonList () {
      const { data } = await this.$Http.get('/DataListCompany/GetCleanerWorkRoadDetailApi?ParentNo=' + this.cleanerGroupValue)
      if (this.villageValue === '全部') {
        this.cleanerTeamList = data
        return false
      } else {
        this.cleanerTeamList = this.cleanerTeamList.filter(item => item.村 === this.villageValue)
      }
    },
    // 获取区域列表
    async getAreaList () {
      const areaData = await this.$Http.get('/DataListCompany/GetRoadByAreaApi?AreaName=' + this.setPersonForm.area)
      this.areaList = areaData.data
    },
    // 保存人员信息
    async savePerson () {
      const params = {
        ClientNo: this.setPersonForm.CLIENT_NO,
        Area: this.setPersonForm.area,
        StaffName: this.setPersonForm.name
      }
      await this.$Http.get('/DataListCompany/SaveStaffRoadApi', { params })
      this.setPersonShow = false
      // 刷新列表信息
      this.getPersonList()
      // console.log(data);
    },
    // 获取班组列表
    async getGrouplist () {
      let { data } = await this.$Http.get('/DataListCompany/GetTeamWorkApi?ClientNo=' + this.$route.query.ClientNo)
      data = data.map((item, index) => {
        item.Index = index + 1
        return item
      })
      this.cleanerTeamList = data
    },
    // 获取镇列表
    async getTownList () {
      const data = await this.$Http.get('/DataListCompany/GetTownListApi')
      this.townList = data.data
      // console.log(this.townList);
      this.townValue.push(this.townList[0].CLIENT_NAME)
      this.getVillageList()
    },
    // 获取村列表
    async getVillageList (e) {
      if (!e) e = this.townValue
      this.villageList = []
      let newAry = []
      for (var item in e) {
        const { data } = await this.$Http.get('/DataListCompany/GetVillageListByTownApi?ParentName=' + e[item])
        newAry = newAry.concat(data)
      }
      this.villageList = newAry

      this.villageList = this.villageList.map(item => {
        item.key = item.CLIENT_NAME
        item.label = item.CLIENT_NAME
        return item
      })

      console.log(this.villageList);


      // 获取已分配的数据
      const data1 = await this.$Http.get('/DataListCompany/GetWorkRelationsApi?LeadName=' + this.cleanerTeamName)
      let ary = []
      data1.data.forEach(element => {
        ary.push(element.CLIENT_NAME)
      })
      this.distributionResult = ary
      // console.log(this.distributionResult)
    },
    // 保存分配
    async saveTeam () {
      let JsonStr = []
      for (const k in this.distributionResult) {
        const l = this.villageList.find(ele => {
          return ele.label === this.distributionResult[k]
        })
        const obj = {}
        obj.PARENT_NAME = l.PARENT_NAME
        obj.CLIENT_NAME = this.distributionResult[k]
        obj.LEAD_NAME = this.cleanerTeamName
        JsonStr.push(obj)
      }
      JsonStr = JSON.stringify(JsonStr)
      const { data } = await this.$Http.post('/DataListCompany/SaveRelationApi', { JsonStr })
      if (data.message) this.$message.error(data.message)
    },

    async hardWareTest () {
      let JsonStr = []
      // for (const k in this.distributionResult) {
      //   const l = this.villageList.find(ele => {
      //     return ele.label === this.distributionResult[k]
      //   })

      // }
      const obj = {}
      obj.notifyType = 'deviceDataChanged'
      obj.deviceId = '5887caed-dc5a-407c-80d4-3d59f38c75d3'
      obj.gatewayId = '5887caed-dc5a-407c-80d4-3d59f38c75d3'
      obj.requestId = 'adfasdfasdf'
      // obj.service.serviceId='Register1111'
      // obj.service.serviceType='Register'
      // obj.service.data.version='LG:1-0.0.3'
      // obj.service.data.imei='862278044971702'
      // obj.service.eventTime='20191218T160954Z'
      JsonStr.push(obj)
      JsonStr = JSON.stringify(JsonStr)
      const { data } = await this.$Http.post('/Hardware/HardWareRegisterApi', { JsonStr })
      // if (data.message) this.$message.error(data.message)
    }

  }
}
</script>

<style scoped lang="less">
.work-area {
  height: 100%;
  position: relative;
  .work_area {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 20px;
    position: relative;
    text-align: center;
    border-right: 2px solid #07c4a8;
    cursor: default;
    & > span:hover {
      color: #07c4a8;
    }
    .work_area_list {
      width: 270px;
      border: 1px solid #ccc;
      background-color: #f3f3f3;
      position: absolute;
      top: 18px;
      left: -10px;
      z-index: 222222222222222222;
      span:last-child {
        border-bottom: 0;
      }
      span {
        display: block;
        padding: 0 10px 0 10px;
        line-height: 26px;
        color: #333;
        border-bottom: 1px solid #2ea9fa;
        &:hover {
          color: #fff;
          background-color: #2ea9fa;
        }
      }
    }
  }
  .cleaner_team {
    width: 600px;
    height: 500px;
    background-color: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    color: #333;
    border-radius: 8px;
    // overflow: hidden;
    box-shadow: 0 0 5px 3px #ccc;
    h2 {
      line-height: 30px;
      border-bottom: 1px solid #ccc;
      padding-left: 10px;
      color: #666;
      span {
        margin-right: 5px;
      }
      i {
        float: right;
        margin-right: 10px;
      }
    }
    .cleaner_team_content {
      height: calc(~'100% - 32px');
      border-radius: 8px;
      overflow: hidden;
      // background-color: pink;
      .top_box {
        height: 30px;
        line-height: 30px;
        background-color: #fff;
        padding-left: 20px;
        border-bottom: 1px solid #ccc;
        .el-select {
          width: 150px;
          /deep/.el-input__suffix {
            top: 3px;
          }
        }
        .cleanerTeamNum {
          margin-left: 50px;
          span {
            border-bottom: 1px solid #ccc;
            padding: 0 5px;
          }
        }
      }
      .table_list {
        height: calc(~'100% - 30px');
      }
    }
    .set_team {
      width: 800px;
      height: calc(~'100% - 52px');
      background-color: #fff;
      position: absolute;
      top: 50% !important;
      left: -15%;
      transform: translateY(-50%);
      z-index: 99 !important;
      border-radius: 8px;
      border: 1px solid #ccc;
      box-shadow: 0 0 5px 3px #ccc;
      overflow: hidden;
      .top_box {
        height: 30px;
        display: flex;
        align-items: center;
        padding-left: 20px;
        border-bottom: 1px solid #ccc;
        & > span:nth-child(1) {
          width: 60px;
        }
        .el-input {
          width: 150px;
          margin-right: 40px;
        }
      }
      .set_team_content {
        height: calc(~'100% - 102px');
        // background-color: pink;
        display: flex;
        justify-content: center;
        align-items: center;
        .box1 {
          width: 200px;
          height: 288px;
          border-radius: 4px;
          margin-right: 20px;
          background-color: #fff;
          border: 1px solid #ebeef5;
          box-shadow: 0 0 15px 3px #ccc;
          overflow: hidden;
          p {
            height: 40px;
            line-height: 40px;
            background-color: #f5f7fa;
            padding-left: 15px;
            border-bottom: 1px solid #ebeef5;
          }
          .group {
            height: calc(~'100% - 40px');
            padding: 6px 0;
            padding-left: 15px;
            box-sizing: border-box;
            overflow-y: auto;
            .el-checkbox {
              display: block;
              margin-bottom: 5px;
            }
          }
        }
        /deep/.el-transfer-panel {
          box-shadow: 0 0 15px 3px #ccc;
        }
      }
      .setTeamBtns {
        display: flex;
        align-items: center;
        justify-content: center;
        .el-button {
          padding: 0 10px;
          margin: 0 20px;
        }
      }
    }
  }
  .personnel_road {
    width: 900px;
    // overflow: hidden;
    .top_box {
      padding-left: 20px;
      border-bottom: 1px solid #ccc;
      .el-form {
        height: 30px;
        display: flex;
        align-items: center;
        .el-form-item {
          margin-bottom: 0;
          .el-button {
            margin-top: 2px;
            padding: 0 5px;
          }
        }
      }
      .el-select {
        width: 150px;
      }
    }
  }
  .personnelRoad_content {
    height: calc(~'100% - 63px');
    border-radius: 8px;
    overflow: hidden;
    // background-color: pink;
  }
  .setPerson {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -50px;
    left: 50%;
    z-index: 10000 !important;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 5px 3px #ccc;
    .set_person_content .el-form {
      padding: 20px 0;
      padding-right: 70px;
      padding-left: 31px;
      .el-select {
        width: 100%;
      }
      .el-form-item:last-child {
        display: flex;
        justify-content: center;
        .el-button {
          float: left;
          margin: 0 20px;
          padding: 0 10px;
        }
      }
    }
  }
}
.personNum {
  padding: 0 4px;
  border-bottom: 1px solid #ccc;
}
.box {
  border: 1px solid #ccc;
  height: 100px;
  padding-left: 15px;
  overflow-y: auto;
}
</style>
